<template>
  <div id="orderDetail">
    <!--导航栏-->
    <van-nav-bar
        title="商品清单"
        left-arrow
        :fixed=true
        :border=true
        @click-left="$router.go(-1)"
    ></van-nav-bar>
    <!--内容-->
    <van-cell-group style="margin-top: 3rem">
      <van-cell title="商品" :value="`共${checkedShopCount}件`"></van-cell>
      <van-card
          v-for="(goods) in checkedShopCart"
          :key="goods.id"
          :num="goods.count"
          :price="goods.price.toFixed(2)"
          :title="goods.title"
          :thumb=baseURL1+goods.img
      >
      </van-card>
    </van-cell-group>
  </div>
</template>

<script>
    import img from "@/api/api"
    export default {

   data(){
     return{
       //   couponId:0,
       // showList:false,
       // chosenCoupon: -1,
       // coupons:tempList1,
       // disabledCoupons:tempList2,
       shopCart: this.$store.state.shopCart,
       baseURL1:img.src,
     }

   },
  name: "OrderDetail",
  methods:{

  },
  computed:{
    // ...mapState(['shopCart']),
    // 1. 获取选中的商品
    checkedShopCart(){
      let shopCart = [];
      Object.values(this.shopCart).forEach((goods, index)=>{
          shopCart.push(goods);
      });
      return shopCart;
    },
    // 2. 选中商品的总件数
    checkedShopCount(){
      let goodsCount = 0;
      Object.values(this.checkedShopCart).forEach((goods, index) => {
          goodsCount+=parseInt(goods.count);
      })
      return goodsCount;
    }
  }
}
</script>

<style scoped>
#orderDetail{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  z-index: 200;

}
</style>